// 语法：useLayoutEffect(setup, dependencies?)
// useLayoutEffect(() => {
//   return () => {
//   };
// }, []);
// useLayoutEffect 是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发。

// 目标：1.useEffect和useLayoutEffect的区别
//        1-1.useLayoutEffect比useEffect更早执行，useLayoutEffect会在浏览器重新绘制屏幕之前触发。
//        1-2.useLayoutEffect同步 会阻塞dom渲染，useEffect异步，不会阻塞dom渲染。
//       2.验证useLayoutEffect的触发时机
//       3.应用场景：利用重新绘制DOM之前就触发的时机+同步（做完useLayoutEffect的操作才绘制屏幕）
//          需要同步读取或更改DOM：例如，你需要读取元素的大小或位置并在渲染前进行调整。
//          防止闪烁：在某些情况下，异步的useEffect可能会导致可见的布局跳动或闪烁。例如，动画的启动或某些可见的快速DOM更改。
//          模拟生命周期方法：如果你正在将旧的类组件迁移到功能组件，并需要模拟 componentDidMount、componentDidUpdate和componentWillUnmount的同步行为。

import React, { useEffect, useLayoutEffect, useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  // 验证1+2
  // 不阻塞DOM
  // useEffect(() => {
  //   for (let i = 0; i < 5000; i++) {
  //     setCount((count) => count + 1);
  //   }
  // }, []);
  //阻塞DOM
  // useLayoutEffect(() => {
  //   for (let i = 0; i < 5000; i++) {
  //     //console.log(i);
  //     setCount((count) => count + 1);
  //   }
  // }, []);
  // 区别观察 <h1>app</h1> 和遍历列表 渲染时机

  // 3.应用场景
  useLayoutEffect(() => {
    // 从地址栏获取滚动条位置
    // const top = new URLSearchParams(window.location.search).get('top');
    const top = window.location.search.split('=')[1];
    // 获取container,让他滚动到指定位置
    const container = document.getElementById('container') as HTMLDivElement;
    container.scrollTop = Number(top) || 0;
  });
  // 使用useEffect区别--注意滚动条的位置，会有从顶部闪到指定位置的过程
  // useEffect(() => {
  //   const top = window.location.search.split('=')[1];
  //   const container = document.getElementById('container') as HTMLDivElement;
  //   container.scrollTop = Number(top) || 0;
  // });

  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
    // 获取滚动条位置
    // const scrollTop = document.getElementById('container')?.scrollTop;
    const scrollTop = e.currentTarget.scrollTop;
    // 把滚动位置记在地址栏上
    console.log(scrollTop);
    window.history.replaceState({}, '', `?top=${scrollTop}`);
  };

  return (
    <>
      {/* 演示 useLayoutEffect 和 useEffect的区别 */}
      {/* <div>
        <h1>app</h1>
        {Array.from({ length: count }).map((_, index) => {
          return <div key={index}>{index}</div>;
        })}
      </div> */}
      {/* 3.应用场景 需求：记住当前列表页的滚动位置，点击详情页，再返回列表页 还停留在当前的滚动位置 */}
      <div
        onScroll={handleScroll}
        style={{ height: '500px', overflow: 'auto' }}
        id="container"
      >
        {Array.from({ length: 5000 }).map((item, index) => (
          <div key={index}>{index + 1}</div>
        ))}
      </div>
    </>
  );
};

export default App;
